<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍展示</title>
</head>
<body>
<a href="${pageContext.request.contextPath}/book/toAddBook">书籍添加</a>
<a href="${pageContext.request.contextPath}/book/allBook">查询全部书籍</a>

<%--加入样式支持 这里没有使用--%>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  <h3>书籍展示</h3>
<span>模糊查询书籍名称：</span><input type="text" id="cx"><input type="submit"  id="tj" value="查询">
    <table>
        <tr>
            <th>书籍编号</th>
            <th>书籍名称</th>
            <th>书籍数量</th>
            <th>书籍详情</th>
            <th>操作</th>
        </tr>

         <c:forEach var="book" items="${list}">
             <tr>
               <td>${book.bookId}</td>
               <td>${book.bookName}</td>
               <td>${book.bookCounts}</td>
               <td>${book.detail}</td>
                 <td>
                     <a href="${pageContext.request.contextPath}/book/toupdateBook?id=${book.bookId}">修改</a>
                     <a href="${pageContext.request.contextPath}/book/deleteBook/${book.bookId}">删除</a>
                 </td>
             </tr>
         </c:forEach>

    </table>
</body>
</html>
<script type="application/javascript">
    $(document).ready(function(){
        $("#tj").click(function(){
            var cx = $("#cx").val();
            $.ajax({
                url:"${pageContext.request.contextPath}/book/queryByName/"+cx,
                async:true,
                type : "GET",
                dataType : "text",
                success:function (result) {
                    if (result = this.success){
                        console.log("成功"+result)
                    }else {
                        console.log("失败")
                    }
                }});
        });
    });
</script>

